<template>
  <view
    class="pro-list flex flex-col w100 h100"
    :style="{ '--theme': themeColor }"
  >
    <view class="head">
      <nav-bar title="商品列表" ref="navBar" />
      <view class="flex search flexAIC">
        <u--input
          placeholder="请输入商品名称"
          border="surround"
          v-model="form.title"
          clearable
          prefixIcon="search"
          @focus="isFocus = true"
          @blur="isFocus = false"
        />
        <view v-if="pubUserInfo.mainShopStatus">
          <view
            class="btn center"
            v-if="isFocus == true"
            @click="getProduct(1)"
          >
            搜索
          </view>
          <view class="flex-col center" @click="showFilter = true" v-else>
            <view class="btn text-50 center iconfont icon-shaixuan"></view>
            <view class="btn text-22 center">筛选</view>
          </view>
        </view>
        <view v-else>
          <view
            class="btn center"
            v-if="isFocus == true"
            @click="getProduct(1)"
          >
            搜索
          </view>
        </view>
      </view>
      <view class="flex tab text-28">
        <view
          :class="[
            'flex1',
            'center',
            'tab-cld',
            index == activeTab ? 'activeTab' : '',
          ]"
          v-for="(item, index) in list"
          :key="index"
          @click="changeTab(index)"
          >{{ item }}</view
        >
      </view>
    </view>
    <view class="tip" v-if="pubUserInfo.mainShopStatus">
      提示：上下架操作会影响所有门店，商品下架直接不显示在门店商品列表
    </view>
    <view class="content flex flex1 flex-col">
      <view class="list flex1 flex" v-if="classifyList.length > 0">
        <scroll-view scroll-y class="left">
          <view
            v-for="(item, index) in classifyList"
            :key="index"
            :class="[
              item.id == form.categoryId ? 'leftActive' : '',
              'left-tab',
            ]"
            @click="changeClass(item.id)"
            >{{ item.title }}</view
          >
        </scroll-view>
        <scroll-view
          scroll-y
          class="right flex1"
          lower-threshold="100px"
          @scrolltolower="tolower"
        >
          <productContent
            v-for="(item, index) in proList"
            :key="index"
            :params="item"
            class="w100"
          />
          <XhEmpty title="暂无相关商品数据" v-if="proList.length <= 0" />
        </scroll-view>
      </view>
      <XhEmpty class="list flex1 flex" v-else />
      <view class="bottom">
        <u-button
          type="primary"
          :disabled="!pubUserInfo.mainShopStatus"
          class="bottom"
          @click="toAdd"
        >
          发布商品
        </u-button>
      </view>
    </view>
    <chooseShop
      :visible.sync="showFilter"
      @chooseClass="chooseShop"
      :activeStoreId="form.storeId"
    />
  </view>
</template>

<script>
import { mapState } from "vuex";
import { getProductList, searchClass } from "@/service/api/sp-product/index";
import { chooseShop } from "@/components/pageComponents/sp-product/choose-shop";
import { productContent } from "@/components/pageComponents/sp-product/product-content";
export default {
  data() {
    return {
      list: ["出售中", "已下架"],
      value: "",
      isFocus: false,
      showFilter: false,
      form: {
        pageNum: 1,
        pageSize: 10,
        mainShopStatus: "",
        status: 1, // 状态 0 下架 1上架
        goodsType: 100, // 类型
        storeId: "",
        categoryId: "",
        title: "",
      },
      proList: [],
      total: 0,
      activeTab: 0,
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
    ...mapState("sp-common/auth", ["pubUserInfo"]),
    ...mapState("sp-product/index", ["classifyList"]),
  },
  components: {
    chooseShop,
    productContent,
  },
  mounted() {
    this.form.mainShopStatus = this.pubUserInfo.mainShopStatus;
    this.form.categoryId = this.classifyList[0].id;
    this.getProduct();
  },
  methods: {
    tolower() {
      if (this.proList.length === this.total) return;
      this.form.pageNum++;
      this.getProduct();
    },
    toAdd() {
      this.$Router.push({ name: "addProduct" });
    },
    getProduct(type) {
      this.isFocus = false;
      let { form } = this;
      if (type) {
        form.pageNum = 1;
      }
      getProductList(form).then((res) => {
        this.proList = res.list;
        this.total = res.total;
      });
    },
    changeTab(index) {
      this.activeTab = index;
      let status = index == 0 ? 1 : 0;
      if (this.form.status == status) return;
      this.form = Object.assign({}, this.form, {
        status,
        pageNum: 1,
        categoryId: this.classifyList[0].id,
      });
      this.getProduct();
    },
    changeClass(id) {
      this.form.categoryId = id;
      this.getProduct();
    },
    chooseShop(data) {
      this.form.storeId = data.storeData.storeId;
      this.getProduct(1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../css/product-list.scss";
</style>